<template>
    <div>
        <el-cascader v-model="a" :options="tree" :props="{ label: 'name', value: 'id', expandTrigger: 'hover' }"
            @change="handleChange"></el-cascader>
    </div>
</template>
<script>
let data = [
    {
        "id": 1,
        "name": "救援大队",
        "type": "总部",
        "parentId": null,
        "description": null,
        "orgRole": null
    },
    {
        "id": 2,
        "name": "队长",
        "type": null,
        "parentId": 1,
        "description": null,
        "orgRole": null
    },
    {
        "id": 3,
        "name": "党支部",
        "type": null,
        "parentId": 1,
        "description": null,
        "orgRole": null
    },
    {
        "id": 4,
        "name": "团支部",
        "type": null,
        "parentId": 1,
        "description": null,
        "orgRole": null
    },
    {
        "id": 5,
        "name": "妇联",
        "type": null,
        "parentId": 1,
        "description": null,
        "orgRole": null
    },
    {
        "id": 6,
        "name": "工会",
        "type": null,
        "parentId": 1,
        "description": null,
        "orgRole": null
    },
    {
        "id": 7,
        "name": "直属组",
        "type": null,
        "parentId": 2,
        "description": null,
        "orgRole": null
    },
    {
        "id": 8,
        "name": "联勤中心",
        "type": null,
        "parentId": 2,
        "description": null,
        "orgRole": null
    },
    {
        "id": 9,
        "name": "行动中心",
        "type": null,
        "parentId": 2,
        "description": null,
        "orgRole": null
    },
    {
        "id": 10,
        "name": "秘书中心",
        "type": null,
        "parentId": 2,
        "description": null,
        "orgRole": null
    },
    {
        "id": 11,
        "name": "外联组",
        "type": null,
        "parentId": 7,
        "description": null,
        "orgRole": null
    },
    {
        "id": 12,
        "name": "督察组",
        "type": null,
        "parentId": 7,
        "description": null,
        "orgRole": null
    },
    {
        "id": 13,
        "name": "装备组",
        "type": "专业组",
        "parentId": 8,
        "description": null,
        "orgRole": null
    },
    {
        "id": 14,
        "name": "车辆组",
        "type": "专业组",
        "parentId": 8,
        "description": null,
        "orgRole": null
    },
    {
        "id": 15,
        "name": "后勤组",
        "type": "专业组",
        "parentId": 8,
        "description": null,
        "orgRole": null
    },
    {
        "id": 16,
        "name": "水域组",
        "type": "专业组",
        "parentId": 9,
        "description": null,
        "orgRole": null
    },
    {
        "id": 17,
        "name": "医疗组",
        "type": "专业组",
        "parentId": 9,
        "description": null,
        "orgRole": null
    },
    {
        "id": 18,
        "name": "通讯组",
        "type": "专业组",
        "parentId": 9,
        "description": null,
        "orgRole": null
    },
    {
        "id": 19,
        "name": "特勤组",
        "type": "专业组",
        "parentId": 9,
        "description": null,
        "orgRole": null
    },
    {
        "id": 20,
        "name": "绳索组",
        "type": "专业组",
        "parentId": 9,
        "description": null,
        "orgRole": null
    },
    {
        "id": 21,
        "name": "城搜组",
        "type": "专业组",
        "parentId": 9,
        "description": null,
        "orgRole": null
    },
    {
        "id": 22,
        "name": "搜救犬组",
        "type": "专业组",
        "parentId": 9,
        "description": null,
        "orgRole": null
    },
    {
        "id": 23,
        "name": "山地组",
        "type": "专业组",
        "parentId": 9,
        "description": null,
        "orgRole": null
    },
    {
        "id": 24,
        "name": "无人机组",
        "type": "专业组",
        "parentId": 9,
        "description": null,
        "orgRole": null
    },
    {
        "id": 25,
        "name": "任务后台组",
        "type": "专业组",
        "parentId": 9,
        "description": null,
        "orgRole": null
    },
    {
        "id": 26,
        "name": "志愿者发展部",
        "type": null,
        "parentId": 10,
        "description": null,
        "orgRole": null
    },
    {
        "id": 27,
        "name": "培训组",
        "type": null,
        "parentId": 10,
        "description": null,
        "orgRole": null
    },
    {
        "id": 28,
        "name": "宣传组",
        "type": null,
        "parentId": 10,
        "description": null,
        "orgRole": null
    },
    {
        "id": 29,
        "name": "信息组",
        "type": null,
        "parentId": 10,
        "description": null,
        "orgRole": null
    },
    {
        "id": 30,
        "name": "秘书组",
        "type": null,
        "parentId": 10,
        "description": null,
        "orgRole": null
    },
    {
        "id": 31,
        "name": "财务组",
        "type": null,
        "parentId": 10,
        "description": null,
        "orgRole": null
    },
    {
        "id": 32,
        "name": "法务组",
        "type": null,
        "parentId": 10,
        "description": null,
        "orgRole": null
    }
]
export default {
    data() {
        return {
            tree: [],
            a: []
        }
    },
    methods: {
        // 获取组织架构
        getdata(data, iption, paretid) {
            data.forEach(element => {
                if (element.parentId == paretid) {
                    iption.push(element)
                    if (data.some(item => item.parentId == element.id)) {
                        element.children = []
                        this.getdata(data, element.children, element.id)
                    }
                }

            });

        },
        handleChange() {
            console.log(this.a);

        }
    },
    mounted() {
        this.getdata(data, this.tree, null)
        console.log(this.tree);
    }
}
</script>